<template>
    <div class="content">
        <div class="query" v-if="showQuery">
            <el-form :inline="true" :model="form" label-width="auto">
                <el-form-item label="表名：">
                    <el-input clearable v-model="form.tableName" style="width: 200px" placeholder="请输入表名查询" />
                </el-form-item>
                <el-form-item label-width="200">
                    <el-button type="primary" @click="getData" :icon="Search">查询</el-button>
                    <el-button @click="reset" :icon="Refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="fun">
            <div class="left">
                <el-button type="primary" :disabled="tableNames.length == 0" plain @click="toSetting"
                    :icon="Position">代码生成</el-button>
            </div>
            <div class="right">
                <el-tooltip :content="showQuery ? '隐藏搜索栏' : '展示搜索栏'" placement="top">
                    <el-button :icon="TurnOff" circle @click="showQuery = false" v-if="showQuery" />
                    <el-button :icon="Open" circle @click="showQuery = true" v-else />
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                    <el-button :icon="Refresh" circle @click="getData()" />
                </el-tooltip>
            </div>
        </div>
        <div class="table">
            <el-table empty-text="暂无数据" :show-overflow-tooltip="true" :data="tableData" v-loading="loading"
                element-loading-text="数据加载中..."
                :header-cell-style="{ background: 'var(--table-title-color)', color: 'var(--table-title-font-color)' }"
                @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="55" />
                <el-table-column prop="tableName" label="表名" />
                <el-table-column prop="ENGINE" label="引擎" />
                <el-table-column prop="tableComment" label="表描述" />
                <el-table-column prop="createTime" label="建表时间" />
            </el-table>
        </div>
        <el-config-provider>
            <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
                :page-sizes="[10, 20, 30, 40]" :pager-count="$isMobile() ? 5 : 7"
                :layout="$isMobile() ? 'prev,pager,next' : 'total, sizes, prev, pager, next, jumper'"
                :background="!$isMobile()" :total="page.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-config-provider>
        <setting ref="set"></setting>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import api from "@/api"
import { ElMessage } from 'element-plus'
import { Search, Position, TurnOff, Open, Refresh } from '@element-plus/icons-vue'
import setting from "./setting.vue"

const loading = ref(false)
const page = ref({ pageSize: 10, pageNum: 1, currentPage: 0, total: 0 })
const tableData = ref([])
const form = ref({})
const tableNames = ref([])
const set = ref()
const showQuery = ref(true)

const getData = async () => {
    loading.value = true
    const params = { pageNum: page.value.pageNum, pageSize: page.value.pageSize, ...form.value }
    const res = await api.get('/system/generate/pageList', params)
    if (res.data.code === 200) {
        tableData.value = res.data.data.records
        page.value.currentPage = res.data.data.current
        page.value.total = res.data.data.total
        loading.value = false
    } else {
        ElMessage.error(res.data.msg)
    }
}
const handleSizeChange = (val) => {
    page.value.pageSize = val
    getData()
}
const handleCurrentChange = (val) => {
    page.value.pageNum = val
    getData()
}
const reset = () => {
    form.value = {}
    getData()
}
const handleSelectionChange = (val) => {
    let idArr = val.map(item => item.tableName)
    tableNames.value = idArr
}
const toSetting = () => {
    if (tableNames.value.length === 0) {
        ElMessage.warning('请先选择需要代码生成的表，再做操作!')
        return
    }
    set.value.init(tableNames.value)
}

onMounted(() => {
    getData()
})
</script>
<style scoped></style>
